<template>
  <div class="tableH">
    <el-table
      v-loading="loading"
      :data="listData"
      :default-sort="{prop: Object.keys(tableConfig.table_show)[0], order: 'ascending'}"
      border
      default-expand-all
      row-key="key"
      stripe
      @selection-change="deleteSelectData"
    >
      <template slot="empty">
        <el-empty :image-size="300" description="暂无数据" style="font-weight: bold"></el-empty>
      </template>
      <el-table-column v-if="tableConfig.selection" :align="tableConfig.align" type="selection" width="55" />
      <el-table-column
        v-for="(item, index) in Object.keys(tableConfig.table_show)"
        :key="index"
        show-overflow-tooltip
        :align="tableConfig.align"
        :label="Object.values(tableConfig.table_show)[index]"
        :prop="item"
        :width="item === 'add_time'?160:false"
        :sortable="tableConfig.sortable[item]"
      />
      <el-table-column
        v-for="(item, index) in tableConfig.slots"
        :key="(Object.keys(tableConfig.table_show).length)+index"
        :align="item.align || 'center'"
        show-overflow-tooltip
        :label="item.label"
        :prop="item.object_name"
        :width="item.width"
      >
        <template v-slot="scope">
          <slot :data="scope" :name="item.slot_name" />
        </template>
      </el-table-column>
      <el-table-column v-if="tableConfig.status" align="center" label="是否启用" width="100">
        <template v-slot="scope">
          <el-switch v-model="scope.row.status" disabled />
        </template>
      </el-table-column>
      <el-table-column v-if="tableConfig.operate" align="center" label="操作" :width="typeof tableConfig.operate=== 'number'?tableConfig.operate:150">
        <template v-slot="scope">
          <slot :data="scope" name="operate" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'Table',
  props: {
    listData: {
      type: Array,
      required: true,
      default: function() {
        return []
      }
    },
    tableConfig: {
      type: Object,
      required: true
    },
    loading: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
    }
  },
  created() {

  },
  mounted() {
  },
  methods: {
    deleteSelectData(value) {
      const deleteArr = []
      for (const i in value) {
        deleteArr.push({ key: value[i].key })
      }
      this.$emit('select-change', deleteArr)
    }
  }
}
</script>
<style>
</style>
